<!DOCTYPE html>
<html lang="cn-zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成二维码和条形码 - bootstrap版</title>
    <link rel="stylesheet" href="//mirror.fe80.cn/bootstrap/4.6.0/css/bootstrap.min.css">
    <style>
        body{
            background-color: #f7f7f9;
        }
        .container{
            background-color: #fff;
            margin-top: 60px;
            border-radius: 10px;
            box-shadow: 0 0 5px #008B8B;
            padding: 22px 2% 22px 2%;
        }
        .row {
            margin-right: 0px;
            margin-left: 0px;
        }
        .img-show{
            border: 1px dashed #008B8B;
            border-radius: 6px;
            padding: 5px;
            padding-top: 14px;
            min-height: 100px;
            margin: 6px auto;
        }
        .box{
            text-align: center;
            overflow-x: hidden;
        }
        .col-sm-12 h5{
            color: #008B8B;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12" style="text-align: center;">
                <h5>请输入字符串以生成二维码和条形码</h5>
            </div>
            <div class="col-sm-12">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" name="code" placeholder="请输入内容" aria-label="请输入内容"
                        aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-success input-group-text">确定</button>
                        <!-- <span class="input-group-text" id="basic-addon2">确定</span> -->
                    </div>
                </div>
            </div>
            <div class="col-sm-12 img-show">
                <div class="box">
                    <div id="code"></div>
                </div>
            </div>
            <div class="col-sm-12 img-show">
                <div class="box">
                    <canvas id="canvascode"></canvas>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//mirror.fe80.cn/jquery/3.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="JsBarcode.all.min.js"></script>
    <script type="text/javascript">
        $('.input-group-text').on('click', function () {
            var value = $.trim($('input[name="code"]').val());
            $("#code").empty();
            $("#code").qrcode({
                // render: "canvas", //table方式
                width: 200, //宽度
                height: 200, //高度
                text: value//任意内容
            });
            // $("#svgcode").JsBarcode(wii.qrcodeMaker());//or JsBarcode("#svgcode", "Hi!");
            $("#canvascode").JsBarcode(value);//or JsBarcode("#canvascode", "Hello world!");
            // JsBarcode("#imgcode", wii.qrcodeMaker());//or $("#imgcode").JsBarcode("I'm huangenai!");
        });

        var tools = {};
        // 获取url中的参数
        // 获取url的page参数  useage：wii.getUrlParam("page")
        tools.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        };
    </script>
</body>
</html>